<template>
    <div class="index">
        <mu-appbar title="首页">
            <mu-icon-button slot="left"/>
            <mu-icon-button slot="left"/>
            <mu-icon-button icon="message" slot="right"/>
            <mu-icon-button icon="search" slot="right" :to="{ name :'Search'}" />
        </mu-appbar>

        <wc-swiper class="swiper" ref="swiper" v-if="banners.length">
            <wc-slide v-for="(slide, key) in banners" :key="key">
                <a :href="slide.url"><img :src="slide.imageurl"/></a>
            </wc-slide>
        </wc-swiper>

        <component :is="showcourse" :courses="courses"></component>
    </div>
</template>

<script>

  import CourseList from './CourseList'

  export default {
    name: 'Index',
    data() {
      return {
        showcourse: 'list',
      }
    },
    computed: {
      courses() {
        return this.$store.state.courses;
      },
      banners() {
        return this.$store.state.banners;
      }
    },
    mounted() {
      //得到首页banner
      this.$store.dispatch('getBanner');
      //获取首页课程列表
      this.$store.dispatch('getCourseList');
    },
    components: {
      list: CourseList
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style>
    .swiper {
        max-height: 14rem;
        overflow: hidden;
    }

    .swiper img {
        max-width: 100%;
    }

    .mu-item {
        padding: 10px;
    }

    .course-list {
        /*margin-top: 0.8rem;*/
        width: 100%;
        clear: both;
        height: 6.5rem;
    }

    .course-img {
        display: inline-block;
        background: red;
        width: 11rem;
        float: left;
    }

    .course-img img {
        width: 100%;
    }

    .index-course-info {
        padding: 0 0.8rem;
        margin-left: 11rem;
        overflow: hidden;
    }

    .course-info-title {
        height: 2.7rem;
        font-size: 0.9rem;
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.4rem;
        margin-bottom: 0.9rem;
    }

    .info-info {
        font-size: 12px;
        color: #777;
        height: 1.6rem;
    }

    .info-info .col {
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
</style>
